<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>配置材料</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 

  <link rel="stylesheet" href="../../res/layuis/css/layui.css">
  <link rel="stylesheet" href="../../res/css/button/button.css">
  <link rel="stylesheet" href="../../res/css/row/row.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../res/layuis/layui.js" charset="utf-8"></script>
  <style>
        #billOfMaterial {
            height: 39px!important;
            line-height: 39px!important;
        }
 
  </style>
</head>
<body>
  
<table class="layui-table" id="billOfMaterial">
	 <thead>
	    <tr>
	     
	      <th lay-data="{align:'center'}" style="display: none;">材料ID</th>
	      <th lay-data="{align:'center'}" style="display: none;">乐器ID</th> 
	      <th lay-data="{align:'center'}">乐器名称</th>
	      <th lay-data="{align:'center'}">材料名称</th>
	      <th lay-data="{align:'center'}">材料数量</th>
	      <th lay-data="{align:'center'}" style='text-align:center;'>操作</th>
	    </tr>
	 </thead>
	 <tbody id="billOfMaterialTbody">
	 
	 </tbody>
</table>
<script type="text/javascript">
	var  billOfMaterialText="";
	var bomIds="";
	var billOfMaterials=new Array();
	var muId=null;
	var muName=null;
	$(function(){
		muId=getParameter("muId");
		muName=getParameter("muName");
		$.ajaxSetup({
			async: false
		});
		var url="../../listenBillOfMaterial/bomFindAll.action"
		var data={"muId":getParameter("muId")}
		$.post(url,data,function(mes){
			$.each(mes,function(i,item){
			 	billOfMaterialText+=item.rawstockId+","+item.muId+","+item.muName+","+item.rawstockName+","+item.bomNumber+"#";
			 	bomIds+=item.bomId+",";
			})
		},"json") 
		$.ajaxSetup({
			async: true
		});
		 var url="../../listenRawstockType/findRawstockType.action";
		   var data=null;
		  $.post(url,data,function(mes){
			  $.each(mes.data,function(i,item){
				  
					  $("#rawstockTypeDiv").append("<div class='rtIdDiv' style='width:100%;box-shadow: 3px 3px 3px #000000;height:10%;background-color:#DCDCDC;margin-top:4%;' onclick=findRawTypeId(\'"+item.rtId+"\')>"+item.rtName+"</div>")
				 
			  })
		  },"json")

		 
	  $("#billOfMaterialTbody").html("")
	  billOfMaterials=billOfMaterialText.split("#");
	  for (var i = 0; i < billOfMaterials.length; i++) {
		  if(billOfMaterials[i]){
			  $("#billOfMaterialTbody").append("<tr>"
						+"<td style='display:none;'>"+billOfMaterials[i].split(",")[0]+"</td>"
						+"<td style='display:none;'>"+billOfMaterials[i].split(",")[1]+"</td>"
						+"<td>"+billOfMaterials[i].split(",")[2]+"</td>"
						+"<td>"+billOfMaterials[i].split(",")[3]+"</td>"
						+"<td style='width:200px;'><input type='text' name='title' id='"+billOfMaterials[i].split(",")[0]+"'  required lay-verify='required' value="+billOfMaterials[i].split(",")[4]+"  class='layui-input' style='border:0px;height:22px;' onkeyup='input(this,event)'></td>"
						+"<td style='text-align:center;'><a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a></td>"
						+"</tr>")
		  }
		  
	  }
		/**
		 * 从地址栏传值的代码
		 * @param param
		 * @returns
		 */

		function getParameter(param){
			var query = window.location.search;
			var iLen = param.length;
			var iStart = query.indexOf(param);
			if (iStart == -1)
				return "";
			iStart += iLen + 1;
			var iEnd = query.indexOf("&", iStart);
			if (iEnd == -1)
				return query.substring(iStart);
			return query.substring(iStart, iEnd);
		}
	})
	
	function findRawTypeId(rtId){
		layui.use('table',function(){
			  var table = layui.table;
			  var form = layui.form;
			  
				  table.render({
					    elem: '#rawstockType'
					    	,page: true
					    ,url:'../../listenRawstock/findRawstock.action?rtId='+rtId
					    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					    ,cols: [[
					    	{type:'checkbox',align:'center'}
					      ,{field:'rawstockId',align:'center'}
					      ,{field:'rtName',title: '材料类型',align:'center'}
					      ,{field:'rawstockName',title: '材料名称',align:'center'}
					      ,{field:'rawstockPrice',title: '材料价格',align:'center'}
					      ,{field:'rawstockExplain',title: '材料说明',align:'center'}
					    ]],id: 'idTest',done: function (res, curr, count) {
				            $("[data-field='rawstockId']").css('display','none');
				            $("#checkedDiv").html("")
				            var billOfMaterials = new Array()
 				            billOfMaterials=billOfMaterialText.split("#");
					       	 for (var i = 0; i < billOfMaterials.length-1; i++) {
					       		$("#checkedDiv").append("<div id='checkedDiv"+billOfMaterials[i].split(",")[0]+"' class='checkedDiv flag note note--success new-item' style='width: 13%;float:left;margin-left:1%;' onclick='removeChecked(\"checkedDiv"+billOfMaterials[i].split(",")[0]+"\",\""+billOfMaterials[i].split(",")[0]+"\")'>" +
					  					"<div class='flag__image note__icon'><i class='fa fa-check'></i></div>"+
					  					" <div class='flag__body note__text'>"+billOfMaterials[i].split(",")[3]+"</div>"+
										"</div>")
					       		$('#rawstockType').next().find('.layui-table-body tr').each(function(index,item){
					       			
					       			var ids=$(item).find('td[data-field="rawstockId"]').text();
					       			if(billOfMaterials[i].split(",")[0]==ids){
					       				var index=$(item).data('index');
					       	            var che = $('#rawstockType').next().find('.layui-table-body tr[data-index="'+index+'"] input[name="layTableCheckbox"]')
					       	            che.prop("checked",true)
					       	           form.render();
					       			}
					       			
					       		});
					       	 
						    }
					  }
				  });
		});
	}
	 
</script>
<div id="checkedDiv" style="width: 100%;height: 120px;border: 1px solid #D3D3D3;box-shadow: 0 0 10px #C0C0C0;margin-bottom: 20px;"></div>
<div style="width: 15%;height: 526px;border: 1px solid #D3D3D3;box-shadow: 0 0 10px #C0C0C0;float: left;margin-top: 10px;margin-right: 10px;">
     <div style="width: 100%;height: 7%;border-bottom: 1px solid #A9A9A9;text-align: center;"><h3>材料类型查询</h3></div>
     <div id="rawstockTypeDiv" style="margin-top: 5%;height: 85%;"></div>
</div>

<div class="demoTable" style="margin-top: 10px;width: 75%;float: left;">
 	
    <div class="x-body">
     <div class="layui-input-inline">
    <form class="layui-form" >
    
      <div class="layui-input-inline">
          <input type="text" name="rawstockName" id="rawstockName" placeholder="请输入材料名称" autocomplete="off" class="layui-input" style="float: left;">
      </div>
      </form>
        </div>
       <div class="layui-input-inline">
         <button class="layui-btn" data-type="reload" lay-filter="sreach" id="materialSreach"><i class="layui-icon">&#xe615;</i></button>
      </div>
      
       <div class="layui-input-inline">
         <input type="button" name="submitConfigure" id="submitConfigure" class="layui-btn" value="加入配置">
      </div>
    
<table class="layui-table" lay-filter="demo" id="rawstockType">

</table>
</div>
</div>
 

<script type="text/javascript">
layui.use('table',function(){
	  var table = layui.table;
	  var form = layui.form;
		  table.render({
			    elem: '#rawstockType'
			    	,page: true
			    ,url:'../../listenRawstock/findRawstock.action'
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			    ,cols: [[
			    	{type:'checkbox',align:'center'}
			      ,{field:'rawstockId',align:'center'}
			      ,{field:'rtName',title: '材料类型',align:'center'}
			      ,{field:'rawstockName',title: '材料名称',align:'center'}
			      ,{field:'rawstockPrice',title: '材料价格',align:'center'}
			      ,{field:'rawstockExplain',title: '材料说明',align:'center'}
			    ]],id: 'idTest2',done: function (res, curr, count) {
		            $("[data-field='rawstockId']").css('display','none');
		            $("#checkedDiv").html("")
		            var billOfMaterials = new Array()
			            billOfMaterials=billOfMaterialText.split("#");
				       	 for (var i = 0; i < billOfMaterials.length-1; i++) {
				       		 $("#checkedDiv").append("<div id='checkedDiv"+billOfMaterials[i].split(",")[0]+"' class='checkedDiv flag note note--success new-item' style='width: 13%;float:left;margin-left:1%;' onclick='removeChecked(\"checkedDiv"+billOfMaterials[i].split(",")[0]+"\",\""+billOfMaterials[i].split(",")[0]+"\")'>" +
					  					"<div class='flag__image note__icon'><i class='fa fa-check'></i></div>"+
					  					" <div class='flag__body note__text'>"+billOfMaterials[i].split(",")[3]+"</div>"+
										"</div>")
				       		$('#rawstockType').next().find('.layui-table-body tr').each(function(index,item){
				       			
				       			var ids=$(item).find('td[data-field="rawstockId"]').text();
				       			if(billOfMaterials[i].split(",")[0]==ids){
				       				var index=$(item).data('index');
				       	            var che = $('#rawstockType').next().find('.layui-table-body tr[data-index="'+index+'"] input[name="layTableCheckbox"]')
				       	            che.prop("checked",true)
				       	           form.render();
				       			}
				       			
				       		});
				       	 
					    }
			    }
			  });
	 
});


</script>
 </div>
 </div>
 
 
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript" src="../../res/js/billOfMaterial/billOfMaterial.js"></script>
</body>
</html>